import SEO from "../components/SEO";

<SEO
  title="Circular Progress"
  description="Circular Progress is used to indicates the progress for determinate and indeterminate processes."
/>

# Circular Progress

The Circular Progress component is used to indicates the progress for both determinate and indeterminate processes.

- Determinate progress fills the circular track with color, as the indicator
  moves from 0 to 360 degrees.
- Indeterminate progress grows and shrinks the indicator while moving along the
  circular track.

See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CCircularProgress/accessibility.md">accessibility report</a>

<carbon-ad />

## Import

```js
import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";
```

## Usage

```vue live=true
<c-circular-progress :value="80" />
```

### Changing the size

You can add `size` prop to the progress bar to add a custom size.

```vue live=true
// Change the size to 120px
<c-circular-progress :value="30" size="120px" />
```

### Changing the thickness

You can add `thickness` prop to update the thickness of the progress ring.

> The thickness has to be a ratio of the size. The value should be between 0 and 1.

```vue live=true
// 10% of size (100px) => 10px
<c-circular-progress :value="30" size="120px" :thickness="0.1" />
```

### Changing the color

You can add `color` prop to any progress bar to apply any color that exists in
the theme.

```vue live=true
<c-circular-progress :value="30" color="orange" :thickness="0.1" />
```

### Adding label

Chakra exports a `CCircularProgressLabel` to help you add a label. Pass this
component as children and you'll be able to render the value

```vue live=true
<c-circular-progress :value="40" color="green">
  <c-circular-progress-label>40%</c-circular-progress-label>
</c-circular-progress>
```

### Indeterminate Progress

Setting the progress to indeterminate means you're not able to determine the
`value` upfront, so won't need to pass the `value` prop.

```vue live=true
<c-circular-progress is-indeterminate />
```

### Accessibility

- `CCircularProgress` has a `role` set to `progressbar` to denote that it's a progress bar
- `CCircularProgress` has `aria-valuenow` set to the percentage completion value passed to
  the component, to ensure the progress percent is visible to screen readers.

## Props

| Name            | Type      | Default | Description                                                                           |
| --------------- | --------- | ------- | ------------------------------------------------------------------------------------- |
| size            | `string`  | `48px`  | The size of the circular progress in CSS units                                        |
| max             | `number`  | `100`   | Maximum value defining 100% progress made (must be higher than 'min')                 |
| min             | `number`  | `0`     | Minimum value defining 'no progress' (must be lower than 'max')                       |
| value           | `number`  |         | Current progress (must be between min/max)                                            |
| isIndeterminate | `boolean` |         | Puts the component into 'indeterminate' state; Ignores 'value' prop                   |
| thickness       | `number`  | `0.2`   | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1` |
| angle           | `number`  | `0`     | Angle to rotate progress indicator by                                                 |
| trackColor      | `string`  | `gray`  | The color name of the progress track. Use a color key in the theme object             |
| color           | `string`  | `blue`  | The color of the progress indicator. Use a color key in the theme object              |

## Slots

| Name    | Description                                                                      |
| ------- | -------------------------------------------------------------------------------- |
| default | Used for the `CCircularProgressLabel` to display the current progress percentage |
